<template>
  <view style="margin-bottom: 20rpx">
    <divider-white />
    <view
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        height: 70rpx;
        font-size: 28rpx;
      "
    >
      {{ product.productDesc || 'Unknown Product' }}
    </view>
    <view class="product-item">
      <view class="product-image">
        <image :src="imageSource" class="image" @error="handleImageError"></image>
      </view>
      <view style="margin-left: 10rpx">
        <divider-vertical />
      </view>
      <view class="product-info">
        <view class="product-specs">
          <view class="spec-item" v-for="(item, index) in productInfo" :key="index">
            <text class="spec-label">{{ item.label }}</text>
            <text class="spec-value">{{ item.value }}</text>
          </view>
        </view>
      </view>
      <view class="product-action">
        <text class="action-text">详&ensp;细&ensp;参&ensp;数</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ProductItem } from '@/service/product/product'
import { ref, computed } from 'vue'
import DividerWhite from '@/components/divider/dividerWhite.vue'

const props = defineProps<{
  product: ProductItem
}>()

const defaultImage = '/static/images/icons/default.jpg'

// todo : 处理图片路径
const imageSource = ref(
  'https://grundfos.elearningcn.com' + props.product.productPhoto || defaultImage,
)

// 显示主要产品信息
const productInfo = computed(() => {
  return [
    {
      label: '产品编码:',
      value: props.product.productCode || '--',
    },
    {
      label: '最大扬程:',
      value:
        props.product.maxHeadStr || (props.product.maxHead ? `${props.product.maxHead} m` : '--'),
    },
    {
      label: '最大流量:',
      value:
        props.product.maxFlowStr ||
        (props.product.maxFlow ? `${props.product.maxFlow} m³/h` : '--'),
    },
    {
      label: '电压:',
      value: props.product.voltage || '--',
    },
    {
      label: '功率:',
      value: props.product.power || '--',
    },
    {
      label: '产地:',
      value: props.product.origin || '--',
    },
  ]
})

const handleImageError = () => {
  imageSource.value = defaultImage
}
</script>

<style scoped lang="scss">
.product-item {
  display: flex;
  width: 720rpx;
  height: 240rpx;
  margin-bottom: 20rpx;
  margin-left: 15rpx;
  background-color: #ffffff;
  border-radius: 4rpx 16rpx 16rpx 4rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

  .product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120rpx;
    height: 240rpx;

    .image {
      width: 120rpx;
      height: 200rpx;
    }
  }

  .product-info {
    display: flex;
    flex-direction: column;
    width: 400rpx;
    margin-left: 10rpx;
    margin-top: 5rpx;
    height: 220rpx;

    .product-specs {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-around;

      .spec-item {
        display: flex;
        font-size: 24rpx;

        .spec-label {
          width: 140rpx;
          color: #666666;
        }

        .spec-value {
          flex: 1;
          color: #333333;
        }
      }
    }
  }

  .product-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    margin-top: 4rpx;
    margin-left: 75rpx;
    height: 232rpx;
    border-radius: 15rpx;
    background-color: #254973;

    .action-text {
      width: 40rpx;
      font-size: 28rpx;
      color: #ffffff;
      text-align: center;
      writing-mode: vertical-lr;
    }
  }
}
</style>
